<template>
  <div class="bar-pages">
    <div class="box-left">
<div class="left-process" v-for="(item, index) in processData" :key="index" :style="{'height': item.percentage + '%', width: flag ? '48px' : '14px' }"></div>
</div>
<div class="box-right" :style="{ 'margin-left': flag ? '15px' : '7px' }">
<div class="right-number" v-for="(item, index) in processData" :key="index + 10">{{item.percentage + '%'}} <span v-if="item.desc && flag">{{item.desc}}</span></div>
</div>
  </div>
</template>

<script>
import Tables from '_c/tables'
import Icons from '_c/icons'

export default {
  name: 'bar_pages',
  props: {
    flag: {
      type: Boolean, default: true
    }
  },
  components: {
    Tables,
    Icons
  },
  data () {
    return {
      processData: [
        { percentage: 10, desc: '高' },
        { percentage: 15, desc: '很高' },
        { percentage: 50, desc: '非常高' },
        { percentage: 20, desc: '高' },
        { percentage: 5, desc: '底' }
      ]
    }
  },
  methods: {
  },
  mounted () {
  }
}
</script>

<style lang='less' scoped>
.size {
  width: 100%;
  height: 100%;
}
.bar-pages {
.size;
display: flex;
justify-content: center;
align-items: flex-start;
.box-left {
height: calc(~'100%' - 20px);
}
.left-process {
width: 48px;
background: chocolate;
border-radius: 2px;
margin-top: 4px;
}
.left-process:nth-child(1) {
background: #FFB700;
}
.left-process:nth-child(2) {
background: #FFE452;
}
.left-process:nth-child(3) {
background: #13BE9B;
}
.left-process:nth-child(4) {
background: #FF6E6E;
}
.left-process:nth-child(5) {
background: #EB3F3F;
}
.box-right {
height: calc(~'100%' - 20px);;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
margin-left: 15px;
margin-top: 10px;
.right-number {
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #242424;
line-height: 11px;
}
.right-number:nth-child(3) {
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #242424;
line-height: 17px;
}
}

}
</style>
